<template>
	<Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row  class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="岗位清单名称：" prop="name">
                        <Input class="query-form-el" type="text" v-model="form1.name"/>
                    </FormItem>
                </Col>
                 <Col span="8">
                    <FormItem label="部门名称：" prop="projectName">
                        <cascaderDom ref="existOrg" @setOrgInfo="setOrgInfo" :department="true" :orgTree="true" :rootOrgId="rootOrgId"></cascaderDom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table'  :loading="loading" size="small" :height="tableHeight" class="table" no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>

        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
    </layout>
</template>

<script>
	import {Api} from '../../../api/index.js'
    import { sessionStorage } from '../../../common/cacheUtils.js';
    import cascaderDom from "../../../components/cascader-dom.vue"
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
        components:{cascaderDom},
		data() {
			return {
                switchFlag : false,
                rootOrgId:'',
                form1: {
                    name:"",
                    postId:""
				},
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
				columns1: [{
						type: 'index',
						width: 60,
						align: 'center',
					},
					/*{
                        type: 'index',
                        title: '序号',
                        width: 70,
                        align: 'center',
                    },*/
					{
                        width: 300,
                        minWidth: 100,
                        title: '岗位清单名称',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        minWidth: 110,
                        title: '定制部门',
                        key: 'proName',
                        align: 'center'
                    },
                    {
                        minWidth: 150,
                        title: '定制岗位',
                        align: 'center',
                        key: 'postName'
					},
                    {
                        minWidth: 100,
                        title: '创建人',
                        key: 'creatorName',
                        align: 'center'
                    },
                    {
                        minWidth: 120,
                        title: '创建时间',
                        key: 'createTimeStr',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                            this.save(params.row);
                                        }
                                    }
                                }, '选择'),
                            ]);
                        }
                    }
				],
                dataTable: [],
                tableHeight:'',
                loading: false,
			}
		},
        mounted: function() {
            this.tableHeight = window.innerHeight*0.7;
            let user = sessionStorage('userId').getObject('userId');
            this.rootOrgId =  user.companyId;
            this.query();
        },
		methods: {
            setOrgInfo(data){
                this.form1.postId = data[data.length - 1];
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            save(row){
                this.$emit('getSelectModelData',row);
            },
            query() {
                this.loading = true ;
                let user = sessionStorage('userId').getObject('userId');
                let data = {
                    startPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    postId: user.companyId,
                    creator:""
                }
                if(this.form1.postId != ""){
                    data.postId = this.form1.postId;
                }
                data.name = this.form1.name;
                let url = Api.apsgItemPlan;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {postId:"",name:""};
                this.query();
            },
        }
	}
</script>
